<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<script src="${pageContext.request.contextPath}/ckeditor/ckeditor.js"></script>
<head>
<meta charset="utf-8">
<title>添加文章</title>
<link rel="stylesheet" href="css/addArticle.css">
</head>
<body>

	<form action="article" method="post" id="article" name="addArticle">
		<table class="tables">
			<tr>
			<td>文章标题：</td><td><input name="a_name" type="text" /></td>
			</tr>
			<tr>
			<td>文章所属栏目标题：</td>
			<td>
			<select name="a_columnId">
			<option  value="1">设计文章</option>
			<option  value="2">前端文章</option>
			<option  value="3">旅游杂记</option>
			<option  value="4">其他</option>
			</select>
			</td>
			</tr>
			<tr>
			<td>备注：</td><td><input type="text" name="a_remark"></td>
			</tr>
			<tr>
			<td>文章图片：</td><td><input type="file" accept="image/*" id="thePic"> 
		<input type="hidden" name="picture"> </td>
			</tr>
		</table>

		<img id="imgPic" style="width: 150px; height: 150px ; top: 3px; left: 800px; position: absolute; z-Index:-1;">
		
		    文章内容：<textarea rows="10" cols="80" id="scpg" name="editor01">
				记录你的点点滴滴
			</textarea> 
			<div class="btndiv">
			<input type="submit" class="yes" value="确认" />
			<input type="button" class="yes" value="保存" id="saved"/>
			<input type="button" class="yes" id="backlast" value="返回上一页"/>
			</div>
	</form>

	<script type="text/javascript">
	//富文本框获值
		var editor = CKEDITOR.replace('editor01', {
			uiColor : '9370DB'
		});
		var htmlData = CKEDITOR.instances.scpg.getData();
		editor.on(
						"fileUploadResponse",
						function(evt) {
							console.log(evt)
							// Prevent the default response handler.
							evt.stop();
							var data = evt.data, xhr = data.fileLoader.xhr, response = xhr.responseText
									.split('|');
							console.log(response)
							if (response[0]) {
								data.url = JSON.parse(response[0]).p_content;
							}
						})
		
	</script>


</body>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	
	$(function() {
		

		$('#backlast').click(function(){
			window.history.back(-1); 
		});
		
		$('#saved').click(function(){
			if (addArticle.a_name.value == "") {
				alert("请填写标题");
				addArticle.a_name.focus();
				return false;
			}
			if (addArticle.a_columnId.value == "") {
				alert("请填写标题所属栏");
				addArticle.a_columnId.focus();
				return false;
			}
			if (addArticle.a_remark.value == "") {
				alert("请填写备注");
				addArticle.a_remark.focus();
				return false;
			}
			if (addArticle.picture.value == "") {
				alert("请填写图片");
				addArticle.picture.focus();
				return false;
			}
			var htmlData = CKEDITOR.instances.scpg.getData();
			var a_name = $("input[name='a_name']").val();
			
			var picture=$("input[name='picture']").val()
			var a_columnId=$("select[name='a_columnId']").val();
			var a_remark = $("input[name='a_remark']").val();
			//console.log(a_pictureld)
			$.post("article", {
				"a_name":a_name,
				
				"a_content" : htmlData,
				
				"picture.p_id" : picture,
				
				"a_columnId":a_columnId,
				
				"a_remark" : a_remark,
				
				"a_state":0

			}, function(resp) {
				alert("保存成功");
				window.location.href = "index";
			});
			return false;
		});
		
		//form表单确认
		$('#article').submit(function() {
			if (addArticle.a_name.value == "") {
				alert("请填写标题");
				addArticle.a_name.focus();
				return false;
			}
			if (addArticle.a_columnId.value == "") {
				alert("请填写标题所属栏");
				addArticle.a_columnId.focus();
				return false;
			}
			if (addArticle.a_remark.value == "") {
				alert("请填写备注");
				addArticle.a_remark.focus();
				return false;
			}
			if (addArticle.picture.value == "") {
				alert("请填写图片");
				addArticle.picture.focus();
				return false;
			}
			var htmlData = CKEDITOR.instances.scpg.getData();
			var a_name = $("input[name='a_name']").val();
			
			var picture=$("input[name='picture']").val()
			var a_columnId=$("select[name='a_columnId']").val();
			var a_remark = $("input[name='a_remark']").val();
			//console.log(a_pictureld)
			$.post("article", {
				"a_name":a_name,
				
				"a_content" : htmlData,
				
				"picture.p_id" : picture,
				
				"a_columnId":a_columnId,
				
				"a_remark" : a_remark,
				
				"a_state":4

			}, function(resp) {
				alert("发布成功，审核中");
				window.location.href = "index";
			});
			return false;
		});
		
		
		
		//文件选择框事件
		$('#thePic').change(function(event) {
			//得到文件选择框选择的图片
			var file = event.target.files[0];
			console.log(file)
			var formdata = new FormData();
			formdata.append('upload', file);

			$.ajax({
				url : 'upload',
				type : 'POST',
				data : formdata,
				dataType : 'JSON',
				cache : false,
				processData : false,
				contentType : false,
				success : function(resp) {
					$("input[name='picture']").val(resp.p_id);
					$("#imgPic").attr('src', resp.p_content);
				}
			});
		});
	});
</script>
</html>